/*** Copyright 2016 Johannes Kessler 2016 Johannes Kessler
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@font-face {
	font-family: 'FreeSansMinimal';
	src: url('../../../resources/font/FreeSansMinimal.otf') format('opentype');
}

body {
	font-family: Open Sans Light, DejaVu Sans, sans-serif;
}

.row {
	margin: 0px;
	padding: 0px;
	margin-bottom: 16px;
	width: 100% !important;
}



.CodeMirror.readonly .CodeMirror-scroll {
	background-color: #DFDFDF;
}


#input {
	/*padding-top: 10px;*/
}

.history-code {
	white-space: pre;
}

.ct {
	text-align: center;
}

@-webkit-keyframes wiggle {
	from {
		-webkit-transform: rotateZ(0deg);
		-webkit-transform-origin: 0% 0%;
	}
	50% {
		-webkit-transform: rotateZ(-1deg);
		-webkit-transform-origin: 0% 0%;
	}
	to {
		-webkit-transform: rotateZ(1deg);
		-webkit-transform-origin: 0% 0%;
	}
}



#execution-error div {
	-webkit-animation-name: wiggle;
	-webkit-animation-duration: .2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
}


#groups-tmp:empty {
	display: none;

	transition: display 0.5s;
	-webkit-transition: display 0.5s;
	-moz-transition: display 0.5s;
}

/*ul#groups {
	padding-left: 0em;
}

ul#groups li {
	list-style-type: none;
}

ul#groups > li {
	padding-bottom: 4px;
}

#groups ul {
	padding-left: 30px;
}*/

#execution-error {
	padding-bottom: 1em;
}

.hint-keyword {
	color: #708;
}

.hint-table, .hint-column {
	color: #000;
}

.cm-math, .math, .formula {
	font-family: FreeSansMinimal;
}

.highlight {
	padding: 9px 14px;
	margin-bottom: 14px;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
	border-radius: 4px;
}

#lang-tabs {
	border-bottom-style: none;
}

body.lang-ra *.lang-sql:not(.lang-ra), body.lang-ra *.lang-trc:not(.lang-ra),
body.lang-sql *.lang-ra:not(.lang-sql), body.lang-sql *.lang-trc:not(.lang-sql) {
	display: none;
}

.replace:not(.btn), .replace-all:not(.btn) {
	cursor: pointer;
}

.replace:not(.btn):hover, .replace-all:not(.btn):hover {
	border-bottom: silver dashed 1px;
}

.popover {
	max-width: 450px;
}

#groups-selector2 {
	background-color: none;
}

/*ul.table-list li {
	list-style-type: none;
	display: inline-block;
	margin-right: 16px;
	margin-bottom: 16px;
}*/


@media print {
	.navbar button, .navbar .navbar-collapse, .nav, #result-pag, #input-buttons, .toolbar, #groups-container {
		display: none !important;
	}

	#workspace {
		border-style: none;
	}

	.navbar-brand {
		margin-bottom: 32px;
		font-size: 1.2em
	}

	.tree-container {
		float: none;
	}

	.result-pag {
		display: none;
	}
}



html, body, #root, .view-max {
	width: 100%;
	height: 100%;
	margin: 0px !important;
	padding: 0px !important;
	overflow: hidden;
}

.view-min {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
}


$NAV_BAR_HEIGHT: 64px;

.navbar {
	height: $NAV_BAR_HEIGHT;
	margin: 0px;
	padding: 0px;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.25);
	background-color: rgb(238, 238, 238) !important;
}

.desktopNavbar {
	padding-left: 64px;
	padding-right: 64px;
}

.mobileNavbar {
	> .dropdown > a:focus{
		outline: none;
	}
	> .dropdown > a {
		padding-right: 32px;
	}
}

.navItemSpace {
	padding-right: 16px;
	padding-left: 16px;
}

.view-content{
	width: 100% !important;
	height: calc(100% - #{$NAV_BAR_HEIGHT});
	margin: 0px;
	padding: 32px 0px 0px 0px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.calculator {
	overflow-y: auto;
	height: calc(100% - #{$NAV_BAR_HEIGHT});
}

.download-button{
	margin-right: 16px;
}

@media only screen and (max-width: 991px) {
	/*.navbar {
		display: none;
	}*/
	/*.view-max{
		height: 100% !important;
	}*/
	.desktopNavbar {
		display: none;
	}
	.mobileNavbar {
		display: flex;
	}
	.groups-container{
		display: none !important;
	}
	.calculator{
		height: 100%;
	}
	
	$NAV_TABS_HEIGHT: 42px;
	$INPUT_BUTTONS_ROW: 55px;
	
	
	
	.calculator-container{
		height: calc(100% - #{$NAV_TABS_HEIGHT});
		margin: 0px !important;
		padding: 0px !important;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	
	
	.tab-content, .tab-pane, .editor-base{
		height: 100% !important;
		margin: 0px !important;
		padding: 0px !important;
	}
	
	.tab-pane > div {
		height: 100%;
	}
	
	.input-buttons{
		height: INPUT_BUTTONS_ROW;
		margin: 5px;
	}
	
	.editor-base {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.CodeMirror{
		//height: calc(100% - #{$NAV_TABS_HEIGHT} - 82px - 43px) !important;
		flex-grow: 1;
		margin: 0px !important;
		padding: 0px !important;
	}
	
	.codemirror-toolbar{

	}

	.exec-errors{
		display: none;
	}
	
	.exec-result{
		display: none;
	}
	
	
	.hideOnSM{
		display: none !important;
	}
	
	
	.modal {
		padding: 0 !important; // override inline padding-right added from js
	}
	.modal .modal-dialog {
		width: calc(100% - 32px);
		height: calc(100% - 32px);
		max-width: none;
		margin: 16px 16px 16px 16px;
	}
	.modal .modal-content {
		height: 100%;
		border: 0;
		border-radius: 0;
	}
	.modal .modal-body {
	overflow-y: auto;
	}
	
	.scroll-x {
		text-align: center;
	}
	
}


@media only screen and (min-width: 992px) {
	
	.showOnSM{
		display: none !important;
	}
	
	.calculator{
		padding-top: 32px;
	}
	
	.modal .modal-dialog {
		min-width: 950px;
	}
	
	.desktopNavbar {
		display: flex;
	}
	.mobileNavbar {
		display: none;
	}
	
	.scroll-x {
		display: inline;
	}
	
	table.table-inline {
		width: auto !important;
		display: inline-block;
		vertical-align: middle;
		margin-right: 42px;
	}

}

@media only screen and (min-width: 1200px) {
	.modal .modal-dialog {
		min-width: 1100px;
	}

}

.toolbar__popover {
	min-width: 30px;
	text-align: center;
	margin: 0px !important;
	>span {
		min-width: 28px;
	}
}

.dropdownToolbarButton > .dropdown > button {
	all:unset;
	min-width: 30px;
}

.fancyToastWarning{
	background-color: rgb(255, 157, 0.5);
	backdrop-filter: blur(5px);
}

.fancyToastError{
	background-color: rgba(255, 0, 0, 0.5);
	backdrop-filter: blur(5px);
}

h4 {
	margin-top: 0px !important;
}

.fullWidthBtn {
	width: 100%;
	margin-top: 8px;
}

.maxSize{
	width: 100%;
	height: 100%;
}


.sk-fading-circle {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
  }
  
.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
			animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
			transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
			transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
			transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
		-ms-transform: rotate(120deg);
			transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
		-ms-transform: rotate(150deg);
			transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
			transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
		-ms-transform: rotate(210deg);
			transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
		-ms-transform: rotate(240deg);
			transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
			transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
		-ms-transform: rotate(300deg);
			transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
		-ms-transform: rotate(330deg);
			transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
			animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
			animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
			animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
			animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
			animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
			animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
			animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
			animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; } 
}


.flexSpan{
	flex-grow: 1;
}

.input-buttons {
	margin: 8px 16px 8px 16px;
}

.exec-errors{
	margin: 16px;
	padding: 0px;
	>.alert{
		margin: 0px;
	}
}

.scroll-x {
	overflow-x: auto;
}

.resultCountLabel {
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	margin-top: 16px;
}

.result {
	margin-top: 32px;
}